<template>
	<view class="page" style="z-index: 2;">
		<view class="act-detail">
			<view class="">
				<u-swiper @click="bannerClick()" :list="bannerList" indicator indicatorMode="line" circular
					:height="240"></u-swiper>
			</view>
			<view class="act-info">
				<view class="act-name">
					<view class="act-title">{{actInfo.title}}</view>
					<view @click="share" style="display: flex;justify-content: flex-end;margin-right: 20rpx;">
						<text class="G-font g-share"></text>
					</view>
				</view>

				<view class="act-content">
					{{actInfo.actName}}
				</view>
				<view class="act-price mt10" v-if="actInfo.needPay">
					<text>¥</text>
					<text class="price-money">{{actInfo.price}}</text>
				</view>
				<view class="act-area">
					<text>活动日期：{{actInfo.startDay}}~{{actInfo.endDay}}</text>
				</view>
				<view class="act-area" @click="openMap()">
					<text class="G-font g-location"></text>
					<text style="margin: 0 8rpx;">{{actInfo.address}}</text>
					<text class="G-font g-enter-arrow"></text>
				</view>

				<view class="act-mall">
					<view>
						<text class="G-font g-mall"></text>
						<text style="margin: 0 8rpx;">{{actInfo.shopName}}</text>
					</view>
					<view style="display:flex;justify-content:flex-end;">
						<text>{{actInfo.cTime}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="img-detail">
			<view class="img-title">图文说明</view>
			<view class="img-info">
				<view class="content-box" v-html="detail"></view>

			</view>

		</view>
		<view style="height: 150rpx;"></view>

		<view class="navigation">
			<view class="left">
				<view class="item" @click="gohome()">
					<text class="G-font g-home"></text>
					<view class="text u-line-1">主页</view>
				</view>
				<view class="item go-service">
					<text class="G-font g-service"></text>
					<button open-type="contact">
						<view class="text u-line-1">客服</view>
					</button>

				</view>
				<view class="item" @click="tosave()">
					<text :class="{'g-unsavebtn':issave}" class="G-font g-savebtn"></text>
					<view class="text u-line-1">收藏</view>
				</view>
			</view>
			<view class="right">
				<view class="sub-btn u-line-1" @click="submit()">立即预约</view>
			</view>
		</view>

		<!--分享-->
		<share ref="share" v-on:shareToFriend="shareToFriend" :contentHeight="400"></share>
		<view v-if="!show_poster" style="z-index: 1;">
			<lPainter :board="posterObj" :isBase64ToPath="false" :style="'position:absolute;left:-1000px;top:-1000px;'"
				ref="painter">
			</lPainter>
		</view>

		<u-popup :safeAreaInsetBottom="true" :safeAreaInsetTop="true" mode="center" :show="showhb" round="10"
			:overlay="true" borderRadius="2" :closeable="true" :closeOnClickOverlay="true" @close="closehb">
			<view class="hb-slot">
				<image :src="path" style="width:100%; height: 810rpx;" @click="previewImg"></image>
				<!-- <view class="footer-btn">

					<view class="save" @click="saveImg()">
						保存
					</view>
				</view> -->
			</view>
		</u-popup>
		<u-popup :safeAreaInsetBottom="false" :safeAreaInsetTop="false" mode="center" :show="show" round="10"
			:overlay="true" borderRadius="2" :closeable="false" :closeOnClickOverlay="false" @close="close">


			<view class="popup-slot">
				<view class="disclaimer-title">
					免责协议
				</view>
				<view class="disclaimer">
					<view class="disclaimer-content" v-html="textHtml">
					</view>
				</view>

				<view class="disclaimer-btn">
					<view class="pd20  mt15">
						<u-checkbox-group>
							<u-checkbox @change="change" labelSize="14" size="16" activeColor="#ac4040" shape="circle"
								:customStyle="{marginRight: '16px'}" label="我已阅读上述条款" name="我已阅读上述条款">
							</u-checkbox>
						</u-checkbox-group>
					</view>

					<view class="disclaimer-btn-opt">

						<view @click="close()" class="cancel">取消</view>

						<view @click="sure()" class="sure">确认</view>
					</view>

				</view>
			</view>

		</u-popup>

	</view>
</template>

<script>
	import utils from '@/common/utils.js'
	import share from '@/components/share/share';
	import cache from '@/common/cache.js';
	import lPainter from '@/components/lime-painter/index.vue'
	// 以下路径需根据项目实际情况填写
	import {
		base64ToPath,
		pathToBase64
	} from '@/js_sdk/mmmm-image-tools/index.js'
	export default {
		components: {
			share,
			lPainter
		},
		data() {
			return {
				issave: false,
				actInfo: {},
				detail: "",
				readed: false,
				show: false,
				showhb: false,
				bannerList: [],
				textHtml: "",
				show_poster: false,
				path: '',
				posterObj: {},
				miniewm: ""
			}
		},
		onLoad(e) {
			this.initData(e.id)
			this.loadDoc('disclaimer');
			this.loadHbData();
		},
		onShareAppMessage(res) {
			const value = cache.get('setUserData', false);
			if (res.from === 'button') { // 来自页面内分享按钮
				return {
					title: this.actInfo.title,
					path: '/pages/index/index?scene=userid=' + value.id,
					imageUrl: this.actInfo.mainPic
				};
			}
			if (res.from === 'menu') {
				return {
					title: this.actInfo.title,
					path: '/pages/index/index?scene=userid=' + value.id,
					imageUrl: this.actInfo.mainPic
				};
			}
		},
		// 分享到朋友圈
		onShareTimeline() {
			const value = cache.get('setUserData', false);
			return {
				title: this.actInfo.title,
				path: '/pages/index/index?scene=userid=' + value.id,
				imageUrl: actInfo.mainPic
			};
		},
		methods: {
			loadHbData() {
				let that = this;
				this.$Request.get(this.$api.invite.getInviteCode).then(res => {
					if (res.code === 20000) {
						const b64File = "data:image/png;base64," + res.message;
						base64ToPath(b64File)
							.then(path => {
								const value = cache.get('setUserData', false);
								this.posterObj = {
									width: '670rpx',
									height: '928rpx',
									background: '#fff',
									borderRadius: '16rpx',
									views: [{
											type: 'image',
											src: 'https://xdlapp-bucket.oss-cn-hangzhou.aliyuncs.com/xdl/hbtag.png',
											css: {
												width: '128rpx',
												height: '50rpx',
												left: '542rpx',
												top: '0rpx',
											}
										},
										{
											type: 'image',
											src: value.headImgUrl,
											css: {
												left: '32rpx',
												top: '32rpx',
												borderRadius: '50%',
												width: '80rpx',
												height: '80rpx'
											}
										},
										{
											type: 'text',
											text: value.nickname,
											css: {
												fontSize: '28rpx',
												fontWeight: 'bold',
												color: '#1A2033',
												lineHeight: '28rpx',
												left: '136rpx',
												top: '39rpx'
											}
										},
										{
											type: 'text',
											text: '邀请您一起参加活动',
											css: {
												fontSize: '24rpx',
												color: '#ac4040',
												lineHeight: '24rpx',
												left: '136rpx',
												top: '80rpx'
											}
										},
										{
											type: 'image',
											src: that.actInfo.mainPic,
											css: {
												left: '32rpx',
												top: '144rpx',
												width: '606rpx',
												height: '341rpx',
												borderRadius: '16rpx'
											}
										},
										{
											type: 'text',
											text: that.actInfo.actName,
											css: {
												fontSize: '32rpx',
												color: '#1A2033',
												fontWeight: 'bold',
												lineHeight: '45rpx',
												left: '32rpx',
												top: '509rpx',
												width: '606rpx'
											}
										},
										{
											type: 'image',
											src: path,
											css: {
												left: '50%',
												top: '638rpx',
												transform: 'translate(-50%,0)',
												width: '200rpx',
												height: '200rpx',
												borderRadius: '16rpx',
												border: '3rpx solid rgba(255,255,255,0.5)'
											}
										},
										{
											type: 'text',
											text: '————  由新动力提供技术支持  ————',
											css: {
												left: '0',
												top: '863rpx',
												width: '100%',
												textAlign: 'center',
												fontSize: '24rpx',
												color: '#989FB3',
												lineHeight: '33rpx'
											}
										}
									]
								}
							})
							.catch(error => {
								console.error(error)
							})
					}
				})
			},
			loadDoc(type) {
				this.$Request.get(this.$api.agreement.getAggreement, {
					type: type
				}).then(res => {
					console.log('res', res)
					this.textHtml = res.data.agreementContent;
				})

			},
			saveImg() {
				uni.getSetting({ //获取用户的当前设置
					success: (res) => {
						if (res.authSetting['scope.writePhotosAlbum']) { //验证用户是否授权可以访问相册
							this.saveImageToPhotosAlbum();
						} else {
							uni.authorize({ //如果没有授权，向用户发起请求
								scope: 'scope.writePhotosAlbum',
								success: () => {
									this.saveImageToPhotosAlbum();
								},
								fail: () => {
									uni.showToast({
										title: "请打开保存相册权限，再点击保存相册",
										icon: "none",
										duration: 3000
									});
									setTimeout(() => {
										uni.openSetting({ //调起客户端小程序设置界面,让用户开启访问相册
											success: (res2) => {
												// console.log(res2.authSetting)
											}
										});
									}, 3000);
								}
							})
						}
					}
				})
			},
			saveImageToPhotosAlbum() {
				console.log(this.path)
				let base64 = this.path;
				let filePath = wx.env.USER_DATA_PATH + '/xdl_qrcode.png';
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				uni.getFileSystemManager().writeFile({
					filePath: filePath, //创建一个临时文件名
					data: base64, //写入的文本或二进制数据
					encoding: 'base64', //写入当前文件的字符编码
					success: res => {
						uni.saveImageToPhotosAlbum({
							filePath: filePath,
							success: function(res2) {
								uni.hideLoading();
								uni.showToast({
									title: '保存成功，请从相册选择再分享',
									icon: "none",
									duration: 5000
								})
							},
							fail: function(err) {
								uni.hideLoading();
								// console.log(err.errMsg);
							}
						})
					},
					fail: err => {
						uni.hideLoading();
						//console.log(err)
					}
				})
			},
			initData(id) {
				this.actInfo = utils.getCacheSync('actInfo');
				console.log('this.actInfo', this.actInfo)
				if (!this.actInfo) {
					this.loadData(id);
				} else {
					uni.setNavigationBarTitle({
						title: this.actInfo.title
					});
					this.bannerList = this.actInfo.images? this.actInfo.images.split(','):null;
					if (this.actInfo.saveid) {
						this.issave = true;
					}
					this.detail = this.actInfo.imageText.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ');
				}

			},
			loadData(id) {
				this.$Request.get(this.$api.activity.getActById, {
					id: id
				}).then(res => {
					console.log('dres', res)

					if (res.code === 20000 && res.data != null) {
						console.log('by id', res.data)
						this.actInfo = res.data;
						utils.removeCache("actInfo");
						utils.setCache('actInfo', this.actInfo)
						uni.setNavigationBarTitle({
							title: this.actInfo.title
						});
						this.bannerList =this.actInfo.images ? this.actInfo.images.split(',') :'';
						if (this.actInfo.saveid) {
							this.issave = true;
						}
						this.detail = this.actInfo.imageText.replace(/\<img/gi,
							'<img style="max-width:100%;height:auto" ');
					} else {
						uni.showToast({
							icon: 'error',
							position: 'bottom',
							title: '活动已下线'
						});

						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/index/index',
							});
						}, 500)


					}
				})
			},
			gohome() {
				uni.reLaunch({
					url: '/pages/index/index',
				});
			},
			openMap() {
				const location = this.actInfo.location.split(',');
				console.log('location', this.actInfo)
				uni.openLocation({
					latitude: Number(location[1]), //纬度 
					longitude: Number(location[0]), //经度
					name: this.actInfo.shopName,
					address: this.actInfo.shopName,
					success: function() {
						console.log('success');
					},
					fail(e) {
						console.log(e)
					}
				});
			},
			//分享
			share() {
				this.$refs.share.toggleMask();
			},
			tosave() {
				if (this.issave) {
					this.$Request.get(this.$api.activity.unsave, {
						id: this.actInfo.id
					}).then(res => {
						if (res.code === 20000) {
							this.issave = false;
							uni.showToast({
								icon: 'success',
								position: 'bottom',
								title: '已取消收藏'
							});
						}
					})
				} else {
					this.$Request.get(this.$api.activity.save, {
						id: this.actInfo.id
					}).then(res => {
						if (res.code === 20000) {
							this.issave = true;
							uni.showToast({
								icon: 'success',
								position: 'bottom',
								title: '收藏成功'
							});
						}
					})
				}
			},
			shareToFriend(v) {
				if (v.type == 3) {
					uni.showLoading({
						title: '海报生成中',
					})
					const painter = this.$refs.painter;
					painter.canvasToTempFilePath().then(res => {
						this.path = res.tempFilePath;
						this.showhb = true;
						this.show_poster = true;
						uni.hideLoading();
					});
				}
				this.$refs.share.toggleMask();
			},
			closehb() {
				this.show_poster = false;
				this.showhb = false;
			},
			previewImg() {
				uni.previewImage({
					current: this.path,
					urls: [this.path]
				});
			},
			login() {
				uni.getUserProfile({
					desc: '登录',
					success: (res) => {
						console.log('res', res)
						uni.login({
							success: (v) => {
								console.log('v', v)
								const params = {
									"code": v.code,
									"nickname": res.userInfo.nickName,
									"headImgUrl": res.userInfo.avatarUrl,
									"encryptedData": res.encryptedData,
									"ivStr": res.iv
								}
								this.$Request.post(this.$api.user.loginWithWechat, params).then(
									res => {
										if (res.code == 20000) {
											cache.put('token', res.data.token, 24 * 60 * 60 * 90)
											cache.put('setUserData', res.data.userinfo, 24 *
												60 * 60 * 90)
											uni.showToast({
												icon: 'success',
												position: 'bottom',
												title: '登录成功'
											});
											this.show = true;
										} else {
											uni.showToast({
												icon: 'error',
												position: 'bottom',
												title: res.data.message
											});
										}
										uni.hideLoading()
									})
							}
						})
					},
					fail: (res) => {
						console.log(res)
					}
				});
			},
			submit() {
				const value = cache.get('setUserData', false);
				if (!value) {
					this.login();
				} else {
					if(this.actInfo.menberLevel && value.level!= this.actInfo.menberLevel){
						uni.$u.toast('该功能只限SVIP开放！');
					}else{
						this.show = true;
					}
				}

			},
			close() {
				this.show = false;
			},
			change(e) {
				this.readed = e;
			},
			sure() {
				if (this.readed) {
					uni.navigateTo({
						url: '/pages/my/components/ackorder?goodid=' + 1111
					})
				} else {
					uni.$u.toast('请阅读免责协议');
				}
			},
			bannerClick(e) {
				console.log('eee', e)
				uni.previewImage({
					current: e,
					urls: this.bannerList
				});
			}
		}
	}
</script>

<style lang="scss">
	.hb-slot {
		width: 600rpx;
		height: 850rpx;
		overflow: auto;
		margin: 0 20rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}



	.g-unsavebtn {
		color: #ffab00;
	}

	.go-service {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;

		button {
			background-color: transparent;
			font-size: 20rpx;
			margin-top: -10rpx;
			padding-left: 0;
			padding-right: 0;

			view {

				//display: flex;
				image {
					display: flex;
					width: 46rpx;
					height: 46rpx;
					margin: 0 auto;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					//margin-bottom: 10rpx;
				}
			}

		}

		button::after {
			border: none;
		}
	}


	.popup-slot {
		.disclaimer-title {
			font-size: 30rpx;
			font-weight: bold;
			text-align: center;
			line-height: 66rpx;
		}

		.disclaimer {
			width: 600rpx;
			height: 700rpx;
			overflow: auto;
			margin: 0 20rpx;

			&-content {
				font-size: 28rpx;
			}

		}

		.disclaimer-btn {
			height: 180rpx;

			&-opt {
				display: flex;
				font-size: 35rpx;
				text-align: center;
				justify-content: center;
				align-items: center;

				.cancel {
					background-color: #EEEEEE;
					border-radius: 8rpx;
					color: #000;
					width: 280rpx;
					margin: 0 15rpx;
					height: 70rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.sure {
					background-color: $xdl-color-primary;
					color: #ffffff;
					width: 280rpx;
					border-radius: 8rpx;
					margin: 0 15rpx;
					height: 70rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}

			}

		}

	}



	.navigation {
		position: fixed;
		bottom: 0;
		display: flex;
		border: solid 2rpx #f2f2f2;
		background-color: #ffffff;
		padding: 15rpx 20rpx;
		width: 100%;

		.left {
			display: flex;
			font-size: 20rpx;

			.item {
				margin: 0 30rpx;

				text {
					font-size: 40rpx;
				}
			}
		}

		.right {
			display: flex;
			font-size: 28rpx;
			align-items: center;
			margin-left: 60rpx;

			.sub-btn {
				text-align: center;
				font-weight: bold;
				width: 280rpx;
				line-height: 80rpx;
				padding: 0 30rpx;
				border-radius: 50rpx;
				color: #ffffff;
				background-color: $xdl-color-primary;
				margin-right: 30rpx;
			}
		}
	}

	.img-detail {
		background-color: #ffffff;
		margin: 20rpx 20rpx;
		border-radius: 10rpx;

		.img-title {
			font-size: 28rpx;
			font-weight: bold;
			padding: 20rpx 20rpx 0 20rpx;
		}

		.img-info {
			padding: 20rpx 20rpx;

			view {
				image {
					border-radius: 8rpx;
					width: 100%;
				}
			}

		}
	}

	.act-detail {
		background-color: #ffffff;
		padding-bottom: 20rpx;
		border-bottom-left-radius: 12rpx;
		border-bottom-right-radius: 12rpx;
	}


	.act-mall {
		font-size: 20rpx;
		display: flex;
		margin-top: 10rpx;
		width: 100%;
		color: #909399;

		view {
			width: 50%;

			text {
				font-size: 20rpx;
			}
		}

	}

	.act-area {
		margin-top: 10rpx;
		font-size: 20rpx;
		color: #909399;

		text {
			font-size: 20rpx;
		}


	}

	.act-price {
		color: $xdl-color-primary;
		font-weight: bold;
		font-size: 28rpx;

		.price-money {
			margin: 0 8rpx;
			font-size: 38rpx;
		}
	}


	.act-info {
		margin: 20rpx 20rpx;

		.act-name {
			display: flex;
			width: 100%;

			view {
				width: 50%;
			}

			.act-title {
				width: 50%;
				color: #000;
				font-size: 32rpx;
				font-weight: bold;
			}
		}

		.act-content {
			margin-top: 10rpx;
			font-size: 28rpx;
		}

	}




	.footer-btn {
		margin-top: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		view {
			width: 319rpx;
			height: 66rpx;
			border-radius: 40rpx;
			border: 1px solid $xdl-color-primary;
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: $xdl-color-primary;
			line-height: 66rpx;
			text-align: center;
		}

		.save {
			background: $xdl-color-primary;
			color: #FFFFFF;
		}
	}
</style>
